<template>
	<view>
		<view class="topBox">
			<image
				src="/static/images/4Kc8xGpW6qQljTJM.png"
				style="width: 400rpx; height: 400rpx"></image>
		</view>
		<view style="margin: 30rpx">
			<view class="text">登录后该应用将获得以下权限</view>
			<view class="flex-y-center info">
				<image src="/static/images/dui.png" class="icon"></image>
				<view>获得你的公开信息（昵称、头像等）</view>
			</view>
			<!-- 		<view class="agreement">
				<checkbox-group @change="checkboxChange"> 
					<checkbox name="a" value="1">
						<view class="flex-y-center">
							已阅读并同意
							<view @tap="agree"><text style="color: #22724b">《用户协议》</text></view>
						</view>
					</checkbox>
				</checkbox-group>
			</view> -->
			<button class="login" @tap="bindGetUserInfo">确认登录</button>
			<button class="login graybtn" @tap="toIndex">暂不登录</button>
		</view>

		<view v-if="!user_bind_show">
			<view class="new-modal">
				<view class="new-modal-content">
					<view class="new-modal-header"
						style="padding: 30rpx 0; line-height: 60rpx; font-size: 11pt; border-bottom: 1rpx solid #eee">
						授权获取手机号</view>
					<view class="new-modal-body" style="min-height: 0; margin-bottom: 0">
						<view style="padding: 32rpx 0 40rpx 0; text-align: center">
							<image src="/static/images/bdsj.png" style="width: 88rpx; height: 88rpx"></image>
						</view>
						<view style="padding: 0 41rpx">
							<view class="flex-x-center" style="margin-bottom: 40rpx">申请获取您微信绑定的手机号</view>
						</view>
						<view class="flex-x-center">
							<view>
								<button @getphonenumber="getPhoneNumber" class="btn new-modal-btn" hoverClass="none"
									openType="getPhoneNumber"
									style="width: 500rpx; height: 70rpx; border-radius: 80rpx; margin-bottom: 40rpx">
									确认
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Index
	} from '../../apirequest/index-model.js';
	var i = new Index();
	export default {
		data() {
			return {
				canIUse: uni.canIUse('button.open-type.getUserInfo'),
				isHide: false,
				user_bind_show: true,
				userinfo: '',
				site_config: {
					site_logo: ''
				},
				is_ok: 0
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(e) {

		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			checkboxChange(e) {
				if (e.detail.value.length > 0) {
					this.is_ok = 1;
				} else {
					this.is_ok = 0;
				}
			},
			//返回上一页
			backTo: function() {
				uni.setStorageSync('login_refesh', 1);
				var pages = getCurrentPages(); //获取加载的页面

				var prevPage = pages[pages.length - 2];
				console.log(prevPage)
				var prev_url = prevPage ? prevPage.route : ''; //上页面url

				if (!prevPage || prev_url == 'pages/login/login') {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				} else {
					wx.navigateBack({
						delta: 1,
					});
				}
			},

			toIndex: function() {
				uni.reLaunch({
					url: '/pages/shop/index/index'
				});
			},

			_login: function(o) {
				var that = this;
				uni.login({
					success: (res) => {
						// 获取到用户的 code 之后：res.code
						console.log(res);
						let parent_id = uni.getStorageSync('pid') || 0;

						i.login({
								pid: parent_id,
								user_info: JSON.stringify(o.userInfo),
								avatarUrl: o.userInfo.avatarUrl,
								nickName: o.userInfo.nickName,
								iv: o.iv,
								encryptedData: encodeURIComponent(o.encryptedData),
								code: res.code
							},
							function(t) {
								if (t.code == 1) {
									uni.setStorageSync('userinfo', t.data);
									uni.setStorageSync('token', t.data.token);
									that.userinfo = t.data
									if (t.data.mobile != '') {

										that.backTo();
									} else {
										that.user_bind_show = false
										that.userinfo = t.data

									}
								}

							},
							function(t) {
								uni.showToast({
									title: t.msg,
									icon: 'none'
								});
							}
						);
					}
				});
			},

			bindGetUserInfo: function(e) {
				// if(!this.is_ok){
				// 	uni.showToast({
				// 		title:"请阅读并同意《用户协议》",
				// 		icon:'none'
				// 	})
				// 	return false;
				// }
				var that = this;
				// #ifdef MP
					
					uni.getUserProfile({
						desc: '用于完善会员资料',
						success: function(res) {
							console.log('成功');
							console.log(res);
							if (res.errMsg == 'getUserProfile:ok') {
								//用户按了允许授权按钮
								// 获取到用户的信息了
								that._login(res);
							} else {
								//用户按了拒绝按钮
								uni.showModal({
									title: '提示',
									content: res.errMsg,
									showCancel: false,
									confirmText: '返回授权',
									success: function(res) {
										// 用户没有授权成功
										if (res.confirm) {
											console.log('用户点击了“返回授权”');
										}
									}
								});
							}
						}
					});
				// #endif
				//#ifdef APP-PLUS
					uni.login({
							provider: 'weixin',
							// onlyAuthorize:true, 
							success: function(loginRes) {
						
								// 获取用户信息
								uni.getUserInfo({
									provider: 'weixin',
									success: function(infoRes) {
									
										let parent_id = uni.getStorageSync(
											'pid') || 0;
										i.login({
												pid: parent_id,
												user_info: infoRes.userInfo,
												type: 'app'
											}, 
											function(t) {
												
												if (t.code == 1) {
													uni.setStorageSync('userinfo',t.data);
													uni.setStorageSync('token', t.data.token);
													that.userinfo = t.data
													that.backTo();
												}
			
											},
											function(t) {
												uni.showToast({
													title: t.msg,
													icon: 'none'
												});
											}
										);
									},
									fail: function(res) {
										console.log(res)
									}
								});
								
							},
							fail: function(res) {
								console.log(res)
							}
					});
				//#endif
			
			},
			agree: function(e) {
				uni.navigateTo({
					url: '/pages/agreement/agreement?id=11'
				});
			},
			//获取手机号
			getPhoneNumber: function(o) {
				var n = this.currentPage;
				var that = this;
				if ('getPhoneNumber:fail user deny' == o.detail.errMsg) {
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '未授权'
					});
				} else {
					uni.showLoading({
						title: '授权中'
					});

					let user_id = that.userinfo.id;
					console.log(that.userinfo)
					i.take_mobile({
							user_id: user_id,
							iv: o.detail.iv,
							encryptedData: o.detail.encryptedData,
							sessionKey: that.userinfo.session_key
						},
						function(t) {
							uni.hideLoading();
							if (t.code == 1) {
								uni.setStorageSync('userinfo', t.data);
								that.backTo();
							} else {
								uni.showToast({
									title: t.msg,
									icon: 'none'
								})
							}
						});
				}
			}
		}
	};
</script>
<style>
	/* pages/login/login.wxss */
	page {
		background: #f1f0f5;
		font-size: 0.75rem;
	}

	.topBox {
		background: #fff;
		padding: 40rpx 0;
		text-align: center;
	}

	.topBox .img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		margin-bottom: 10rpx;
	}

	.text {
		font-size: 0.85rem;
		font-weight: 700;
	}

	.info {
		margin-top: 30rpx;
		color: #999;
		font-weight: 700;
	}

	.info .icon {
		width: 45rpx;
		height: 45rpx;
		margin-right: 5rpx;
	}

	.login {
		width: 100% !important;
		background: #42b802;
		color: #fff;
		border-radius: 15rpx;
		margin-top: 15rpx;
		font-size: 0.95rem;
		font-weight: 500;
	}

	.graybtn {
		background: #ddd;
		margin-top: 40rpx;
	}

	.new-modal {
		width: 750rpx;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		-ms-grid-row-align: center;
		align-items: center;
	}

	.new-modal-content {
		width: 630rpx;
		height: auto;
		background-color: #fff;
		border-radius: 16rpx;
		position: relative;
	}

	.new-modal-header {
		padding: 48rpx 24rpx 32rpx 24rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 13pt;
	}

	.new-modal-body {
		padding: 0 24rpx;
		min-height: 400rpx;
		color: #666;
		margin-bottom: 48rpx;
		max-height: 700rpx;
		overflow-y: auto;
	}

	.new-modal-footer {
		height: 88rpx;
		width: 100%;
		border-top: 1rpx solid #e2e2e2;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}

	.btn {
		display: block;
		background: none;
		height: auto;
		width: 100%;
		border: none;
		border-radius: 0;
		padding: 0;
		margin: 0;
		line-height: inherit;
		font-family: inherit;
		color: inherit;
		text-align: inherit;
		background: #42b802;
		font-size: 0.85rem;
		font-weight: 500;
	}

	.btn::after {
		border-radius: 0 !important;
		border: none !important;
	}

	.new-modal-btn {
		height: 100%;
		text-align: center;
		line-height: 70rpx;
		color: #fff;
		border-right: 1rpx solid #e2e2e2;
		min-width: 0;
		-webkit-box-flex: 1;
		-webkit-flex-grow: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
		-webkit-flex-shrink: 1;
		-ms-flex-negative: 1;
		flex-shrink: 1;
	}

	.agreement {
		margin-top: 20rpx;
	}

	/*checkbox选中后样式  */
	.agreement checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #5CCA99;
		border: 1rpx solid #5CCA99 !important;
		/*选中后多选框边框颜色*/
	}

	/*checkbox选中后图标样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		font-size: 26rpx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}
</style>
